<template>
  <div class="toolbar flex">
    <i
      v-for="btn in btns"
      :key="btn.id"
      class="clickable-icon"
      :class="btn.icon"
      :title="btn.name"
      @click="handleClick(btn)"
    ></i>
    <span>{{ currentTime }}</span>
  </div>
</template>
<script lang="ts" setup>
import { inject, Ref, computed } from 'vue'

import { useToolbar } from '@/composables/toolbar'
import { secToTime } from '@/lib/util'
const { btns, handleClick } = useToolbar()
const t = inject<Ref>('currentTime')
const currentTime = computed(() => secToTime(t!.value, false))
</script>
<style lang="stylus" scoped>
@import '../../assets/varibles.styl'
.toolbar
  font-size 24px
  line-height 24px
  height 30px
.clickable-icon
  color $btnColor
  width 30px
.clickable-icon:hover
  color $btnActiveColor
</style>
